{$src}
<style>
    .img-crop-container img {
        position: relative;
        max-width: 100%;
    }
    .z {
        z-index: 5000!important;
    }
    .el-message-box__wrapper{
        z-index: 5000!important;
    }
    .cropper_wrapper {
        display: none;
        height: 364px;
        width: 100%;
        box-shadow: inset 0 0 5px rgba(0,0,0,.25);
        background-color: #fcfcfc;
        overflow: hidden;
    }
    .img_preview {
        width: 184px;
        height: 184px;
        /*float: left;*/
        margin-top: 15px;
        /*margin-right: auto;*/
        /*margin-left: auto;*/
        border: 1px solid #eee;
        border-radius: 4px;
        background-color: #fff;
        overflow: hidden;
    }
    .img_preview:hover {
        border-color: #ccf;
        box-shadow: 0 0 5px rgba(0,0,0,.15);
    }
    .el-dialog__header{
        border-bottom: 1px solid #e5e5e5;
    }
    .el-upload--picture-card .el-icon-plus {
        line-height: inherit;
    }
</style>
<div class="img-crop-container" id="container-{$id}">
    <template v-if="vals.length<1">
        <input type="hidden" name="{$name}" value="" />
    </template>
    <template v-else>
        <template v-for="v in vals">
            <input type="hidden" name="{$name}[]" :value="v" />
        </template>
    </template>
    <div class="upload">
        <div class="el-upload-list el-upload-list--picture-card">
            <div tabindex="0" class="el-upload-list__item is-ready"
                 style="display: none;"
                 :style="{display:filelist.length>0?'inline-block':'none'}"
                 v-if="filelist.length>0" v-for="(v, index) in filelist">
                <img :src="v" alt="" class="el-upload-list__item-thumbnail"/>
                <label class="el-upload-list__item-status-label">
                    <i class="el-icon-upload-success el-icon-check"></i>
                </label>
                <!--<i class="el-icon-close"></i>-->
                <!--<i class="el-icon-close-tip">按 delete 键可删除</i>-->
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handleListPreview(v)">
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span class="el-upload-list__item-delete" @click="fileDel(index)">
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
            <!-- 选择文件 -->
            <div v-if="(limit<=1&&filelist.length<1)||(limit>1&&filelist.length<limit)" v-on:click="showImgDialog" class="el-upload el-upload--picture-card">
                <i class="el-icon-plus"></i>
            </div>
        </div>
    </div>
    <el-dialog
            title="查看"
            :visible.sync="imgPreviewDialog" size="tiny">
        <div class="tc">
            <img :src="previewImageUrl" alt=""/>
        </div>
    </el-dialog>


    <el-dialog
            title="选择图片"
            :visible.sync="selectImageDialog"
            :width="selectImageDialogWidth"
            :close-on-click-modal="false"
            @open="handleOpen"
            :before-close="handleClose" style="display: none">
        <div class="layui-clear">
            <el-form ref="{$id}-form" :model="{}" label-width="110px" size="mini">
                <el-form-item label="选择图片">
                    <el-button type="primary" @click="select_file">
                        选择图片
                        <input ref="fileinput" style="display: none" class="el-upload__input" @change="handleSelectFile" type="file" name="" />
                    </el-button>
                </el-form-item>
            </el-form>
            <div class="layui-col-sm8">
                <div class="cropper_wrapper" :style="{display:selectImageDialog?'block':'none'}">
                    <img id="image-{$id}" ref="crop_elem" :src="crop_img" :style="{display: crop_img?'inline-block':'none'}" />
                </div>
            </div>
            <div class="layui-col-sm4 pl15">
                <div>图片预览：</div>
                <div class="img_preview"></div>
            </div>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-row>
                <el-col :span="12">
                    <span class="fl">
                        <el-button-group>
                            <el-tooltip class="item" effect="dark" content="逆时针旋转" placement="top">
                                <el-button type="primary" size="small" @click="crop.cropper('rotate', -45)">
                                    <i class="fa fa-rotate-left"></i>
                                </el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="顺时针旋转" placement="top">
                                <el-button type="primary" size="small" @click="crop.cropper('rotate', 45)">
                                    <i class="fa fa-repeat"></i>
                                </el-button>
                            </el-tooltip>
                        </el-button-group>

                        <el-button-group>
                            <el-tooltip class="item" effect="dark" content="左右翻转" placement="top">
                                <el-button type="primary" size="small" @click="scaleX">
                                    <i class="fa fa-arrows-h"></i>
                                </el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="上下翻转" placement="top">
                            <el-button type="primary" size="small" @click="scaleY">
                                <i class="fa fa-arrows-v"></i>
                            </el-button>
                            </el-tooltip>
                        </el-button-group>
                        <el-button type="primary" size="small" @click="cropReset">复位</el-button>
                    </span>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" size="small" @click="getCropped">确 定</el-button>
                </el-col>
            </el-row>
        </span>
    </el-dialog>
</div>
<script type="text/javascript">
    if (!window.vue_handle) window.vue_handle = {};
    !(function () {
        var id = '{$id}';
        var name = '{$name}';
        var values = {$value|json_encode};
        var list = {$list|json_encode};
        var opt = {$option|json_encode};
        var limit = '{$limit}';
        // 事件
        let ev = {
            crop: function (event) {},
            ready:function(){
                window.vue_handle['vue_' + id].crop.cropper('setData', window.vue_handle['vue_' + id].crop_data);
                console.log('crop ready');
            }
        };
        $.extend(opt, ev);

        window.vue_handle['vue_' + id] = new Vue({
            el: '#container-' + id,
            data: {
                imgPreviewDialog: false,
                previewImageUrl: false,
                selectImageDialog: false,
                selectImageDialogWidth: '70%',
                crop_img:'',
                crop:null,
                crop_data:{},
                scX:-1,
                scY:-1,
                filelist:list,
                vals:values,
                ori_file:[],
                limit:limit,
            },
            methods: {
                showImgDialog:function() {
                    if (this.filelist.length >= limit && limit > 0 && limit > 1) {
                        this.$notify.error({
                            title: '错误',
                            customClass:'z',
                            message: '只能选择' + limit + '张图片,删除不需要的图片才能重新选择图片'
                        });
                        return false;
                    }
                    this.selectImageDialog = true;
                },
                // 触发事件
                select_file:function() {
                    this.$refs.fileinput.click();
                },
                // 水平翻转
                scaleX:function() {
                    this.crop.cropper('scaleX', this.scX);
                    this.scX = 0-this.scX; // 相反数
                },
                // 垂直翻转
                scaleY:function() {
                    this.crop.cropper('scaleY', this.scY);
                    this.scY = 0 - this.scY; // 相反数
                },
                // 选区复位
                cropReset:function() {
                    this.scX = -1;
                    this.scY = -1;
                    this.crop.cropper('reset');
                },
                // 剪切
                getCropped:function(){
                    this.selectImageDialog = false;
                    if(!this.crop_img) {
                        return false;
                    }
                    this.crop_data = this.crop.cropper('getData');
                    let cas = this.crop.cropper('getCroppedCanvas', {height:opt.height,width:opt.width});
                    let data = cas.toDataURL();
                    if(limit==1) {
                        this.filelist[0] = data;
                        this.vals[0] = data;
                    }else {
                        this.crop_img = '';
                        this.filelist.push(data);
                        this.vals.push(data);
                    }
                },
                // 删除文件
                fileDel:function(id) {
                    var that = this;
                    this.$confirm('确定移除该图片？',{customClass:'z',}).then(function(){
                        that.filelist.splice(id, 1);
                        that.vals.splice(id, 1);
                        that.$notify({
                            title: '成功',
                            message: '移除成功',
                            customClass:'z',
                            type: 'success',
                        });
                    }).catch(function () {});
                },
                // 剪切好的图片预览
                handleListPreview:function(url) {
                    this.imgPreviewDialog = true;
                    this.previewImageUrl = url;
                },
                // 选择文件并渲染剪切
                handleSelectFile:function(e) {
                    let file = e.target.files;
                    let row = file[0];
                    this.ori_file = row;
                    if(!/image/.test(row.type)) {
                        this.$notify.error({
                            title: '错误',
                            customClass: 'z',
                            message: '请选择图片文件',
                        });
                        return false;
                    }
                    // this.crop_img = URL.createObjectURL(file[0]);
                    // 生成预览数据
                    let fileReader = new FileReader();
                    var that = this;
                    fileReader.addEventListener('load', function() {
                        that.crop_img = fileReader.result;
                        that.crop_data = {};
                    })
                    this.$refs[id+'-form'].$el.reset();
                    fileReader.readAsDataURL(row);
                },
                // 关闭文件选择层
                handleClose:function() {
                    this.selectImageDialog = false;
                },
                handleOpen:function(){
                    if (limit == 1 && this.filelist.length) {
                        this.crop_img = this.filelist[0];
                    }
                    this.iniCropper(opt);
                },
                // 初始化剪切工作
                iniCropper:function(option){
                    var that = this;
                    this.$nextTick(function (){
                        if(that.crop) {
                            that.crop = this.crop.cropper('destroy').cropper(option);
                            // this.crop = this.crop.cropper('replace', this.crop_img, false);
                        }else {
                            that.crop = $('#image-'+id).cropper(option);
                        }
                        // console.log(this.crop_data);
                    })
                },
            },
            computed:{
                cropper:function(){
                    if(this.crop) {
                        return this.crop.cropper;
                    }
                    return {};
                },
            },
            // 监听
            watch:{
                crop_img:function(val) {
                    console.log('watch');
                    if(val) this.iniCropper(opt);
                },
            }
        });
    })();
</script>
